<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五星好评</title>
    <link rel="stylesheet" href="./星星.css">
</head>
<body>
    <div class="chen">
        <div class="ll">
            <button>想看</button>
            <button>看过</button>
        </div>
        <div class="zz">
            <p>评价:</p>
            <div class="aa">
                <img class="a1" src="./star.png" alt="">
                <img class="b1" style="display: none;" src="./star_fill.png" alt="">
            </div>
            <div class="aa">
                <img class="a2" src="./star.png" alt="">
                <img class="b2" style="display: none;" src="./star_fill.png" alt="">
            </div>
            <div class="aa">
                <img class="a3" src="./star.png" alt="">
                <img class="b3" style="display: none;" src="./star_fill.png" alt="">
            </div>
            <div class="aa">
                <img class="a4" src="./star.png" alt="">
                <img class="b4" style="display: none;" src="./star_fill.png" alt="">
            </div>
            <div class="aa">
                <img class="a5" src="./star.png" alt="">
                <img class="b5" style="display: none;" src="./star_fill.png" alt="">
            </div>
            <p>推荐</p>
        </div>
        <div class="h">
            <div class="hh">
                <img style="width: 27px; height: 20px;" src="./xinxi.png" alt="">
                <p>写短评</p>
            </div>
            <div class="hh">
                <img src="./工具,写,编辑,钢笔,铅笔,设备,写作,线性,扁平,填充,单色,简约,圆润.png" alt="">
                <p>写影评</p>
            </div>
            <div class="hh">
                <img src="./加.png" alt="">
                <p>提问题</p>
            </div>
            <div class="hh">
                <p>分享到</p>
                <img src="./下三角.png" alt="">
            </div>
        </div>
    </div>
</body>
<script src="../jquery-3.6.3.js"></script>
<script>
    $(document).ready(function () {
        $(".a1").click(function (e) {
            $(".a1").hide();
            $(".b1").show();
        })
        $(".b1").click(function (e) {
            
            $(".b2").hide();
            $(".a2").show();
            $(".b3").hide();
            $(".a3").show();
            $(".b4").hide();
            $(".a4").show();
            $(".b5").hide();
            $(".a5").show();
        })
        $(".a2").click(function (e) {
            $(".a2").hide();
            $(".b2").show();
            $(".a1").hide();
            $(".b1").show();
        })
        $(".b2").click(function (e) {
            
            $(".b3").hide();
            $(".a3").show();
            $(".b4").hide();
            $(".a4").show();
            $(".b5").hide();
            $(".a5").show();
        })
        $(".a3").click(function (e) {
            $(".a3").hide();
            $(".b3").show();
            $(".a1").hide();
            $(".b1").show();
            $(".a2").hide();
            $(".b2").show();
        })
        $(".b3").click(function (e) {
            
            $(".b4").hide();
            $(".a4").show();
            $(".b5").hide();
            $(".a5").show();
        })
        $(".a4").click(function (e) {
            $(".a4").hide();
            $(".b4").show();
            $(".a1").hide();
            $(".b1").show();
            $(".a2").hide();
            $(".b2").show();
            $(".a3").hide();
            $(".b3").show();
        })
        $(".b4").click(function (e) {
            
            $(".b5").hide();
            $(".a5").show();
        })
        $(".a5").click(function (e) {
            $(".a5").hide();
            $(".b5").show();
            $(".a1").hide();
            $(".b1").show();
            $(".a2").hide();
            $(".b2").show();
            $(".a3").hide();
            $(".b3").show();
            $(".a4").hide();
            $(".b4").show();
        })
        $(".b5").click(function (e) {
            // $(".b5").hide();
            // $(".a5").show();
        })
    })
</script>
</html>